<!DOCTYPE HTML>
<html>
  <head>
    <script>
      function drawTree(c, start_x, start_y, len, angle, depth, branchWidth) {
        if (!depth) return;
        var end_x = start_x + len * Math.cos(angle);
        var end_y = start_y + len * Math.sin(angle);
        var new_branchWidth = branchWidth * 0.7;
        c.beginPath();
        c.lineCap = "round";
        c.lineWidth = branchWidth;
        c.moveTo(start_x, start_y);
        c.lineTo(end_x, end_y);

        if (depth <= 1) c.strokeStyle = 'rgb(0,' + (((Math.random() * 64) + 128) >> 0) + ',0)';
        else c.strokeStyle = 'rgb(' + (((Math.random() * 64) + 64) >> 0) + ',50,25)';
        c.stroke();

        var sub_branches = Math.random() * 2 + 1;
        for (var i = 0; i < sub_branches; i++) {
          var new_angle = angle + Math.random() * Math.PI / 2 - Math.PI / 4;
          var new_len = len * (0.7 + Math.random() * 0.3);
          drawTree(c, end_x, end_y, new_len, new_angle, depth - 1, new_branchWidth);
        }
      }

      window.onload = function() {
        var c = document.getElementById("myCanvas").getContext("2d");
        drawTree(c, 300, 480, 60, -Math.PI / 2, 10, 10);
      };
    </script>
  </head>
  
  <body>
    <canvas id="myCanvas" height=500 width=600>
    </canvas>
  </body>
</html>